<template>
<div class="search-main">
  <div class="card search search-box" style="padding: 0">
    <input type="text" v-model="state.queryDto.videoName" class="search-input">
    <el-button class="search-btn" icon="Search" @click="search"></el-button>
  </div>
<div class="result-main" v-if="state.videoList.length>0">
  <div class="card" v-for="c in state.videoList" :key="c" @click="toVideoDetail(c.videoCode)">

    <el-image :src="c.videoCover" style="border-radius: 5px"/>
    <p class="video-name">{{c.videoName}}</p>
  </div>
</div>
<!--  <el-pagination  v-if="state.videoList.length>0" layout="prev, pager, next"  style="width: 100%;display: flex;justify-content: center;margin-top: 10px" />-->
  <el-empty  v-else description="暂未搜索到相关内容！" />
</div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import{useRoute,useRouter} from "vue-router";
import VideoApi from "@/api/VideoApi.js";
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()
const state = reactive({
  queryDto:{
    pageNum:1,
    size:10,
    videoName:null
  },
  videoList:[]
})
onMounted(()=>{
  state.queryDto.videoName = route.query.keywords
  search()
})
const toVideoDetail = (videoCode)=>{
  router.push(`/video/detail/${videoCode}`)
}
const search = ()=>{
  if (state.queryDto.videoName===null || state.queryDto.videoName===""){
    ElMessage.error("请输入关键词搜索！")
    return
  }
  VideoApi.searchVideo(state.queryDto).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
      return
    }
    state.videoList = res.data.data
  })
}

</script>

<style scoped lang="less">
.search-main{
  width: 80%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  margin: 20px auto 0 auto;
}

.result-main{
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
  height: 90%;
  overflow-y: scroll;
  scrollbar-width:none;


}
.search{
  margin: 0 auto;
  width: 40%;
  height: 35px;
}
.card{
  max-height: 350px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.72);
  cursor: pointer;
}
.search-box {

  display: flex;
  justify-content: space-between;
  height: 35px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .1);

  .search-input {
    color: white;
    padding-left: 18px;
    width: 90%;
    font-size: 14px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 35px;
    outline: none;
    border: none;
    background: none;
  }

  .search-btn {
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    width: 10%;
    height: 100%;
    border-radius: 20px;
    border: none;
    background: none;
  }
}
</style>